<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <title>轮播</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul, ol {
            list-style: none;
        }

        .carousel {
            height: 180px;
            margin: 30px auto;
            overflow: hidden;
            position: relative;
        }

        .list {
            position: absolute;
        }

        .list:after {
            content: '';
            display: block;
            clear: both;
        }

        .list > li {
            float: left;
        }

        .carousel img{
            width: 320px;
            height: 180px;
        }


        .btn {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            width: 32px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            border: 1px solid white;
        }

        .btn:hover {
            opacity: 0.8;
            cursor: pointer;
        }

        .btn > span {
            height: 30px;
            line-height: 30px;
            color: white;
        }

        .preBtn {
            left: 10px;
        }

        .nextBtn {
            right: 10px;
        }

        .bottom_ct {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .bottom_ct > ul {
            width: 142px;
            display: flex;
        }

        .bottom_ct > ul > li {
            height: 6px;
            width: 25px;
            border-radius: 3px;
            margin-left: 10px;
            background-color: yellow;
        }

        .bottom_ct > ul:hover {
            cursor: pointer;
        }

        .bottom_ct > ul > li.active {
            background-color: red;
        }


    </style>
</head>
<body>
    <div class="carousel">
        <ul class="list">
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="">
                </a>
            </li>

        </ul>
        <div class="btn preBtn" href="#"><span>&lt;</span></div>
        <div class="btn nextBtn" href="#"><span>&gt;</span></div>
        <div class="bottom_ct">
            <ul class="bullet">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>


    <div class="carousel">
        <ul class="list">
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="">
                </a>
            </li>

        </ul>
        <div class="btn preBtn" href="#"><span>&lt;</span></div>
        <div class="btn nextBtn" href="#"><span>&gt;</span></div>
        <div class="bottom_ct">
            <ul class="bullet">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div class="carousel">
        <ul class="list">
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="">
                </a>
            </li>

        </ul>
        <div class="btn preBtn" href="#"><span>&lt;</span></div>
        <div class="btn nextBtn" href="#"><span>&gt;</span></div>
        <div class="bottom_ct">
            <ul class="bullet">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <script>
        function Carousel($node, nodeWidth) {
            this.init($node, nodeWidth);
            this.bind();
        }

        Carousel.prototype = {
            constructor: Carousel,
            init: function ($node, nodeWidth) {
                console.log('init enter..')
                this.$container = $node;
                this.$container.css({'width': nodeWidth});
                this.$bullet = this.$container.find('.bullet');
                this.$ul = this.$container.find('.list');
                this.$li = this.$ul.find('li');
                this.imgCount = this.$li.length;
                this.imgWidth = this.$li.width();
                this.$preBtn = this.$container.find('.preBtn');
                this.$nextBtn = this.$container.find('.nextBtn');
                this.isAnimate = false;

                // 初始化 $ul 的宽度
                this.$ul.css({'width': (this.imgCount + 2) * this.imgWidth})
                this.$ul.css({'left': -this.imgWidth});

                // 记录当前播放的图片下标
                this.index = 0;

                // 首尾各添加一张图片
                this.$ul.prepend(this.$li.last().clone());
                this.$ul.append(this.$li.first().clone());
            },
            bind(){
                console.log('bind enter..')
                var _this = this;
                this.$nextBtn.on('click', () => {
                    _this.playNext(1);
                })

                this.$preBtn.on('click', () => {
                    _this.playPre(1);
                })

                this.$bullet.on('click','li',function () {
                    let target = $(this).index();
                    if(target > _this.index){
                        _this.playNext(target - _this.index)
                    }else if(target < _this.index){
                        _this.playPre(_this.index - target);
                    }
                })
            },
            playPre(len){
                var _this = this;
                if(_this.isAnimate) return;
                _this.isAnimate = true;
                this.$ul.animate({
                    'left': '+=' + this.imgWidth*len + 'px'
                }, function () {
                    _this.index -= len;
                    console.log(_this.index, _this.imgCount);

                    if (_this.index < 0) {
                        _this.$ul.css({
                            'left': -_this.imgWidth*_this.imgCount
                        })
                        _this.index = _this.imgCount - 1;
                    }

                    _this.setBullet(_this.index);
                    _this.isAnimate = false;

                })
            },
            playNext(len){
                var _this = this;
                if(_this.isAnimate) return;
                _this.isAnimate = true;
                this.$ul.animate({
                    'left': '-=' + this.imgWidth*len + 'px'
                }, function () {
                    _this.index += len;
                    console.log(_this.index, _this.imgCount);

                    if (_this.index === _this.imgCount) {
                        _this.$ul.css({
                            'left': -_this.imgWidth
                        })
                        _this.index = 0;
                    }

                    _this.setBullet(_this.index);
                    _this.isAnimate = false;

                })
            },
            setBullet(index){
                this.$bullet.children().eq(index).addClass('active').siblings().removeClass('active');
            }
        }
        var carousel = new Carousel($('.carousel').eq(0), 640);

        var carousel2 = new Carousel($('.carousel').eq(1), 320);

        var carousel3 = new Carousel($('.carousel').eq(2), 640);

    </script>
</body>
</html>